<template>
  <div class="companyDetail">
    <div class="sticky-box">
      <!-- 背景盒子 -->
      <div class="bg-box">
        <img :src="baseURL + companyDetail.logo" alt="" />
      </div>
      <van-icon
        name="down"
        style="transform: rotate(90deg); margin: 20px 0"
        color="#fff"
        size="25px"
        @click="$router.go(-1)"
      />

      <!-- 顶部盒子 -->
      <div class="info-box">
        <div class="left">
          <h2>{{ companyDetail.name }}</h2>
          <div class="tags">
            <van-tag plain round>{{ companyDetail.type }}</van-tag>
            <van-tag plain round style="margin: 0 5px">{{
              companyDetail.step
            }}</van-tag>
            <van-tag plain round>{{ companyDetail.overtime }}</van-tag>
          </div>
        </div>
        <div class="right">
          <img :src="baseURL + companyDetail.logo" alt="" />
        </div>
      </div>
      <div class="item-box">
        <span
          ><i
            class="iconfont iconicon_gongsi_time"
            style="vertical-align: -10%"
          ></i
          >{{ companyDetail.workTime }}</span
        >
        <span
          ><i class="iconfont iconicon_gongsi_sx"></i
          >{{ companyDetail.restDay }}</span
        >
        <span
          ><i class="iconfont iconicon_gongsi_jiaban"></i
          >{{ companyDetail.overtime }}</span
        >
      </div>
      <div class="scroll-box" style="">
        <div class="inner">
          <span
            v-for="item in companyDetail.weals"
            :key="item.id"
            style="margin: 10px"
          >
            <van-tag color="" plain style="">
              <i
                class="iconfont"
                :class="item.icon"
                style="font-size: 20px"
              ></i>
              <span style="font-size: 13px">{{ item.text }}</span></van-tag
            >
          </span>
        </div>
      </div>
    </div>
    <!-- 内容部分 -->
    <!-- 内容向中心挤 -->
    <div style="padding: 0 10px">
      <div class="content-box">
        <!-- 左边 -->
        <div class="left-content">
          <div class="div-title">公司地址</div>
          <div class="detailAddress">{{ companyDetail.address }}</div>
          <div class="distance">距离地址</div>
        </div>
        <!-- 右边 -->
        <div class="right-content" style="white-space: nowrap">
          <div style="div-title">
            全部地址
            <i class="iconfont iconicon_more" style="font-size: 10px"></i>
          </div>
          <van-button type="default" round size="small" style="margin-top: 25px"
            ><i class="iconfont iconicon_gongsi_daohang"></i> 导航</van-button
          >
        </div>
      </div>
      <div class="desc-box">
        <div class="introduction">
          <div class="introduction-title">公司简介</div>
          <div class="detail">
            {{ companyDetail.desc }}
          </div>
        </div>
      </div>
      <div class="picture">
        <div class="div-title">公司照片</div>
        <div class="content">
          <van-image
            v-for="(item, index) in companyDetail.sliders"
            :key="index"
            width="150"
            height="150"
            fit="contain"
            :src="baseURL + item"
          />
        </div>
      </div>
      <!-- 工商信息 -->
      <div class="BusinessInfo">
        <div class="div-title">工商信息</div>
        <ul class="infoList">
          <li><span>公司全称</span>{{ companyDetail.fullname }}</li>
          <li><span>成立时间</span>{{ companyDetail.establishedTime }}</li>
          <li><span>注册资本</span>{{ companyDetail.capital }}</li>
          <li><span>法人代表</span>{{ companyDetail.legalPerson }}</li>
          <li><span>信息来源</span>{{ companyDetail.messageSource }}</li>
        </ul>
      </div>
      <!-- 评分 -->
      <div class="comment-box">
        <div class="div-title evaluate">
          <span>面试评价</span> <span>写评论</span>
        </div>
        <template v-if="companyDetail && companyDetail.score">
          <div class="score-box">
            <div class="num-box">
              <div>
                <span>{{ companyDetail.score.interviewScore }}</span
                >分
              </div>
              <van-rate
                v-model="companyDetail.score.interviewScore"
                readonly
                :size="10"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="detail-box">
              <ul>
                <li>
                  <span>岗位描述</span>
                  <van-rate
                    v-model="companyDetail.score.interviewerScore"
                    readonly
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </li>
                <li>
                  <span>面试情况</span>
                  <van-rate
                    v-model="companyDetail.score.positionScore"
                    readonly
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </li>
                <li>
                  <span>面试官</span>
                  <van-rate
                    v-model="companyDetail.score.interviewerScore"
                    readonly
                    :size="10"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>

      <!-- 用户评价 -->
      <div class="userComment">
        <!-- 用户评论 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="(item, index) in list" :key="index">
            <div class="userPic">
              <van-image
                round
                fill
                width="35"
                height="35"
                :src="baseURL + item.user.avatar"
              />
            </div>
            <div class="userInfo">
              <div class="top-box">
                <div class="left">
                  <div class="name">{{ item.user.nickname }}</div>
                  <div class="position">面试岗位:{{ item.position }}</div>
                </div>
                <div class="right">
                  <van-rate
                    v-model="item.interviewScore"
                    readonly
                    :size="13"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                  />
                </div>
              </div>
              <div class="commentList">
                <span v-for="(items, length) in item.tags" :key="length">{{
                  items
                }}</span>
              </div>
              <div class="commentDetail">{{ item.content }}</div>
              <div class="data">
                {{ item.created_at.slice(0, 10).replace(/-/g, '.') }}
              </div>
            </div>
          </van-cell>
        </van-list>
      </div>
    </div>
    <!-- 下方跳转按钮 -->
    <div class="bottom-box">
      <div
        class="letf-btn"
        @click="$router.push(`/companyPosition/${$route.params.id}`)"
      >
        在招职位<span>{{ companyDetail.positions }}</span>
      </div>
      <div class="right-btn">
        企业面试题<span>{{ companyDetail.questions }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { detailInfoApi, userCommentApi } from '../../api/index'
export default {
  name: 'companyDetail',

  data () {
    return {
      companyDetail: {},
      baseURL: 'http://119.91.151.46:1337',
      start: 0,
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    num: () => {
      return 5
    }
  },
  async created () {
    const res = await detailInfoApi(this.$route.params.id)
    if (res.data.code === 200) {
      this.companyDetail = res.data.data
    }
  },

  methods: {
    async onLoad () {
      const res = await userCommentApi(this.$route.params.id, this.start)
      console.log(res)
      if (res.data.code === 200) {
        this.list.push(...res.data.data.list)
      }
      this.loading = false
      if (this.loading === false) {
        this.start = this.start + 5
      }
      if (res.data.data.total === this.list.length) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.div-title {
  font-size: 18px;
  margin-bottom: 13px;
}
.companyDetail {
  // 背景图片盒子

  // 粘性盒子
  .sticky-box {
    overflow: hidden;
    .bg-box {
      img {
        width: 90%;
        position: absolute;
        top: -40px;
        filter: blur(20px);
        opacity: 0.41;
        z-index: -1;
      }
    }

    position: sticky;
    top: 0;
    font-size: 0;
    padding: 0 15px;
    background-color: #181a39;
    z-index: 999;

    .info-box {
      display: flex;
      justify-content: space-between;
      .left {
        .tags {
        }
        h2 {
          color: #fff;
          font-size: 20px;
        }
        .van-tag {
          background-color: transparent;
        }
      }
      .right {
        img {
          width: 63px;
          border-radius: 10px;
        }
      }
    }
    .item-box {
      font-size: 12px;
      color: #fff;
      margin-top: 10px;
      i {
        vertical-align: -10%;
        margin-right: 3px;
      }
      span {
        margin-right: 10px;
      }
    }
    .scroll-box {
      margin-top: 10px;
      width: 100%;
      overflow: hidden;

      height: 50px;
      .inner {
        white-space: nowrap;
        overflow-x: auto;

        span {
          .van-tag {
            background: transparent;
            width: 100px;
            height: 40px;
            border-radius: 5px;
            font-size: 15px;
            position: flex;
            justify-content: space-evenly;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .content-box {
    margin-top: 18px;

    .detailAddress {
      font-size: 1px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .distance {
      font-size: 12px;
      color: #b4b4bd;
    }
    font-size: 10px;
    display: flex;
    justify-content: space-between;
  }

  .desc-box {
    margin-top: 35px;
    .introduction {
      .introduction-title {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 8px;
      }
      .detail {
        font-size: 12px;
      }
    }
  }
  .picture {
    padding-top: 20px;
    .content {
      white-space: nowrap;
      overflow-x: auto;
      .van-image {
        margin: 0 10px;
      }
    }
  }
  .BusinessInfo {
    .infoList {
      font-size: 12px;
      li {
        margin-top: 8px;
        span {
          color: #b4b4bd;
          margin-right: 40px;
        }
      }
    }
  }
  // 评分部分
  .comment-box {
    margin-top: 36px;
    .evaluate {
      display: flex;
      justify-content: space-between;
    }

    // 评分盒子
    .score-box {
      padding: 0 20px;
      height: 83px;
      background-color: #f7f7f7;
      border-radius: 10px;
      font-size: 12px;
      display: flex;
      justify-content: center;
      // 总评分
      .num-box {
        flex: 3;
        text-align: center;
        width: 80px;
        height: 80px;
        div {
          span {
            font-size: 45px;
            color: #00b8d4;
          }
        }
      }
      // 评分详情
      .detail-box {
        padding: 10px;

        flex: 7;
        ul {
          li {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            span {
              margin-left: 40px;
            }
            .van-rate {
              margin-right: 40px;
            }
          }
        }
      }
    }
  }
  // 用户评论
  .userComment {
    .van-cell__value {
      display: flex;

      font-size: 13px;
      .userInfo {
        padding-left: 7px;
        flex: 1;
        .top-box {
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            .name {
              font-weight: 700;
            }
            .position {
            }
            .position {
              color: #b6b8c2;
            }
          }
        }
        // 用户评论模块
        .commentList {
          margin-bottom: 11px;

          span {
            background-color: #f7f4f5;
            margin-left: 5px;
          }
        }
        .commentDetail {
          margin-bottom: 11px;

          font-size: 15px;
        }
      }
    }
  }
  // 跳转按钮盒子
  .bottom-box {
    width: 100%;
    height: 95px;
    background-color: #fcfcfc;
    position: sticky;
    bottom: 0;
    font-size: 14px;
    display: flex;
    justify-content: space-evenly;
    div {
      position: relative;
      margin-top: 5px;
      width: 160px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid black;
      border-radius: 10px;
      span {
        position: absolute;

        top: -8px;
      }
    }
  }
}
</style>
